import React, { Component } from 'react';
import { Modal } from 'antd';
import { LineChart } from 'bizcharts';

// 数据源
const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

export default class RightLineModal extends Component {
  render() {
    const { visible, modalCancel } = this.props;

    return (
      <Modal
        title={'数据源数据质量异常趋势(铁渣)'}
        visible={visible}
        onCancel={modalCancel}
        footer={null}
        width={'80%'}
        maskClosable={false}
        centered
      >
        <LineChart
          data={data}
          xField="year"
          yField="value"
          yAxis={{
            label: {
              formatter: val => `${val}%`,
            },
          }}
          tooltip={{
            formatter: ({ year, value }) => ({ name: '废铁', value }),
          }}
        />
      </Modal>
    );
  }
}
